<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS的三种引入方式</title>
</head>
<body>
<!--
    如何打开控制台:
    在页面按F12 打开检查页面
    找到导航栏中的 Console 进入控制台界面
 -->
<!--1.内联(行内)写法
    写在对应的html元素上
    onclick="console.log()": 点击事件 给元素绑定一个点击事件 点击元素时执行""内的代码
    console.log(): 向控制台输出内容
    console.log()的括号内为数字类型时直接添加即可 若为字符串等其他类型需要添加单引号['内容']

    onclick="alert('')"
    其中alert('')为弹窗属性 点击元素时会弹出弹框 附带('')内的内容
 -->
<button onclick="console.log('点击成功!')">测试按钮1</button>
<button onclick="alert('请先登录..')">测试按钮2</button>

<!--2.内部写法
    在body结束前的末尾处加script标签 在标签中写JS代码
    用法:
    1.通过id值直接获取对应的html元素
 -->
<div id="div1"></div>
<script>
    console.log('JS内部写法测试内容');
    console.log(div1);
</script>
<!--
    3.外部写法: 在script标签的src属性中描述外部.js文件的路径以引入外部.js文件
    最好写在`head`结构中 方便查找
    注意: 无法再在已被src属性修饰的外部写法的script标签中使用内部写法与外部写法结合的写法
         只能内部/外部写法2选1
 -->
<script src="01.js"></script>
<script src="01.js">
    console.log('此文段不会执行!');
</script>
</body>
</html>